<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

import BScroll from "better-scroll";
import headerUtil from "./base/common/headerUtil.vue";
import commonNavUtil from "./base/common/commonNavUtil.vue";
import reqApis from '../req/reqApis.js';


const currentData = ref<any>({
  headerObj: {
    showType: 1,
    content: "",
  },
  categoryScroll: null,
  productScroll: null,
  scrollY: 0,
  currentIndex: 0,
  categoryList:[],
  curObj: {},
});

const categoryRef = ref();
const productRef = ref();

const getCategoryListFn = () => {
  reqApis.getCategoryListApi().then((res:any) => {
    if(res.data) {
      currentData.value.categoryList = res.data;
      currentData.value.curObj = res.data[0]
    }
  })
};

const toRouter = (id:any) => {
  router.push({path: "/searchList", query: {typeId: id}});
}

const headerFn = (type: Number) => {
  if(type == 0) {
    history.back();
  }else if(type==1) {
    router.push({path: "/searchList"})
  }
  console.log(type)
};

const selectMenu = (i:any, obj:any) => {
  currentData.value.currentIndex = i;
  currentData.value.curObj = obj;
  console.log(obj);
  let productEles = categoryRef.value.getElementsByClassName("category-item");
  let el = productEles[i];
  currentData.value.categoryScroll.scrollToElement(el, 300);
};
const _initScroll = () => {
  currentData.value.categoryScroll = new BScroll(categoryRef.value, {
    click: true
  });
  currentData.value.productScroll = new BScroll(productRef.value, {
    click: true
  });
};

onMounted(() => {
  _initScroll();
  getCategoryListFn();
});
</script>
<template>
  <section class="productSort">
    <headerUtil :obj="currentData.headerObj" @myClick="headerFn"></headerUtil>
    <div class="content">
      <div class="category-menu" ref="categoryRef">
        <ul>
          <li class="category-item" :class="{'active': currentData.currentIndex==index}" v-for="(item, index) in currentData.categoryList" :key="index" @click="selectMenu(index, item)">{{item.categoryName}}</li>
        </ul>
      </div>
      <div class="product-menu" ref="productRef">
        <ul>
          <li class="type-item">
            <div class="title">{{currentData.curObj.categoryName}}</div>
            <div class="scroll-wrap">
              <div class="product-wrap" v-if="currentData.curObj.categoryTypeList && currentData.curObj.categoryTypeList.length>0" >
                <div @click="toRouter(item.typeId)" class="item" v-for="(item, index) in currentData.curObj.categoryTypeList" :key="index">
                  
                  <div class="product-icon" :style="{background: `#333 url(${item.productIcon})no-repeat center`}"></div>
                  <div class="text">{{item.typeName}}</div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <commonNavUtil :iNow="1"></commonNavUtil>
  </section>
</template>

<style lang="less" scoped>
.productSort {
  width: 3.75rem;
  display: flex;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
  .content {
    flex: 1;
    display: flex;
    .category-menu {
      width: .85rem;
      height: 100%;
      overflow: hidden;
      background: #f8f8f8;
      position: relative;
      .category-item {
        width: .85rem;
        height: .46rem;
        color: #333;
        font-size: .14rem;
        display: flex;
        align-items: center;
        justify-content: center;
        &.active {
          color: #e93b3d;
          background: white;
        }
        
      }
      &::after {
        width: 0.01rem;
        height: 100%;
        content: "";
        position: absolute;
        background: #f8f8f8;
        top: 0;
        right: 0;
        transform: scaleX(0.5);
      }
    }
    .product-menu {
      background: white;
      flex: 1;
      overflow: hidden;
      .type-item {
        height: 100%;
        .title {
          padding:.2rem .1rem;
          font-size: 14px;
          color: #333;
          // font-weight: 600;
          font-weight: 700;
        }
        .scroll-wrap {
          width: 100%;
          height: 100%;
        }
        .product-wrap {
          padding: 0 .2rem;
          box-sizing: border-box;
          overflow: hidden;
          .item {
            width: 33%;
            height: 1.07rem;
            background: white;
            float: left;
            .product-icon {
              width: .7rem;
              height: .7rem;
              margin: 0 auto;
              background-size: cover !important;
            }
            .text {
              padding: .1rem 0;
              text-align: center;
              color: #333;
              font-size: .12rem;
            }
          }
        }
      }
    }
  }

}
</style>

